<template>
<view class="billsInfo"  :style="transportationTarget.billStatus == 2?'margin-bottom: 160rpx;':''" >
			<view class="goods transTarget ">
				<view class="h5">运输目标 
				<!-- 1-草稿 2-未接单 3-已接单 4-进行中 5-已完成 6-已结束 -->
					<text class="gray" v-if="transportationTarget.billStatus == 2">待接单</text>
					<text class="green" v-if="transportationTarget.billStatus == 3">已接单</text>
					<text class="green" v-if="transportationTarget.billStatus == 4">进行中</text>
					<text class="green" v-if="transportationTarget.billStatus == 5">已完成</text>
					<text class="gray" v-if="transportationTarget.billStatus == 6">已结束</text>
					
				</view>
				<u-skeleton
					    rows="3"
						:loading="loading" 
						rowsWidth="688rpx"
						:style = "loading?'margin: 60rpx 0 0 32rpx;':''"
					>
					</u-skeleton>
					<view v-if="!loading">
						<echarts :option="option" style="height: 500rpx;"></echarts>
						
						<view class="echartsBot">
							<view class="sum">
								总量：<text>{{transportationTarget.total}}</text>
							</view>
							<view class="sum surplus">
								剩余：<text>{{transportationTarget.surplusTotal}}{{unit}}</text>
							</view>
						</view>
					</view>
			</view>
			<view class="goods">
				<view class="h5">货物统计 <text>总量：{{transportationTarget.total}}{{unit}}</text></view>
				<view class="goodsStatistics">
					<u-skeleton
						    rows="3"
							:loading="loading" 
							rowsWidth="680rpx"
						>
					</u-skeleton>
					<view class="" v-if="!loading">
						<view class="statistics">
							配载总量：
							<view class="staPro">
								<stapro colorVal="#C6E2FF" :widthVal="widthVal"></stapro>
							</view>
						</view>
						<view class="statistics">
							发运总量：
							<view class="staPro">
								<stapro colorVal="#4D83B9" :widthVal="widthVal1"></stapro>
							</view>
						</view>
						<view class="statistics">
							回单总量：
							<view class="staPro">
								<stapro colorVal="#00468C" :widthVal="widthVal2"></stapro>
							</view>
						</view>
						<view class="statisticsBot">
							<view class="sum">
								<text>{{goods.loadingOrderNum}}{{unit}}</text>
							</view>
							<view class="sum bg1">
								<text>{{goods.sendNum}}{{unit}}</text>
							</view>
							<view class="sum bg2">
								<text>{{goods.receiptNum}}{{unit}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="goods" style="height: 450rpx">
				<view class="h5">运力统计</view>
				<view class="">
					<u-skeleton
						    rows="3"
							rowsWidth="160rpx"
							:loading="loading" 
							:style="loading?'margin-top: 60rpx;margin-left: 32rpx;float: left;':''"
						>
					</u-skeleton>
					<view class="leftBox"  v-if="!loading">
						<view class="">
							配载车数(辆)
							<view class="num">
								{{transportCapacity.loadingOrderNum}}
							</view>
						</view>
						<view class="">
							已回单(辆)
							<view class="num">
								{{transportCapacity.receiptNum}}
							</view>
						</view>
					</view>
						<u-skeleton
							   rows="3"
							   rowsWidth="260rpx"
							   rowsHeight="60rpx"
								titleWidth="260rpx"
								titleHeight="60rpx"
								:loading="loading" 
								:style="loading?'margin-top: 10rpx;float: right;margin-right: 80rpx;transform:rotate(270deg)':''"
							>					
						</u-skeleton>
					<view class="rightBox" v-if="!loading">
						<echarts :option="option1" style="height: 380rpx;"></echarts>
					</view>
				</view>

			</view>
			<view class="goods">
				<view class="h5">支付统计</view>
				<view class="payBox">
					<u-skeleton :loading="loading" 
					avatar 
					rows="3" 
					:style="loading?'margin: 60rpx 0 0 40rpx;':''"
					rowsWidth="560rpx" 
					rowsHeight="40rpx">
					
					</u-skeleton>
					<view class="" v-if="!loading">
						<view class="payEcharts">
								<echarts :option="option2" style="height: 380rpx;"></echarts>
						</view>
						<view class="paynum">
							<view class="">
								未支付单：<text>{{pay.noPayNum}}</text>
								<view class="staPro">
									<stapro colorVal="#4D83B9" :widthVal="payVal"></stapro>
								</view>
							</view>
							<view class="">
								部分支付：<text>{{pay.partNum}}</text>
								<view class="staPro">
									<stapro colorVal="#4D83B9" :widthVal="payVal1"></stapro>
								</view>
							</view>
							<view class="">
								已支付：<text>{{pay.completePayNum}}</text>
								<view class="staPro">
									<stapro colorVal="#4D83B9" :widthVal="payVal2"></stapro>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="btnBox" v-if="transportationTarget.billStatus == 2">
				<view class="btn" @click="changeCarrier()">
					修改承运商
				</view>
				<u-popup :show="changeShow" @close="cancle">
					<view>
						<view class="changeHead">
							选择承运商
						</view>
						<view class="searchBox">
							<u-search shape="square" placeholder="搜索承运商" bgColor="#FAFAFA" :showAction="false" v-model="carrier" 
								@change="searchCarrier()"></u-search>
						</view>
						<view class="tabUl">
							<view class="tabLi">
								<u-radio-group  v-model="carrierName" placement="column" iconPlacement="right" @change="groupChange">
									<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in carriersList"
										:key="index" :label="item.etpName" :name="item.etpName" @change="radioChange">
									</u-radio>
								</u-radio-group>
							</view>
						</view>
						<view class="changeBtn">
							<view class="cancle" @click="cancle()">
								取消
							</view>
							<view class="true" @click="upCarrier()">
								确定
							</view>
						</view>
					</view>
				</u-popup>
			</view>

		</view>
		
	
</template>

<script>
	import echarts from '@/components/echarts/echarts.vue'
	import {wayBillDataBulletinBoard,carriers,carrierList, updateCarrier,wayBillInfo } from '@/config/api/app.js'
	import stapro from '@/components/proBox/proBox.vue'
	export default{
		data(){
			return{
				transportationTarget: {}, //数据看板中运输目标
				goods: {}, //数据看板中货物统计
				transportCapacity: {}, //数据看板中运力统计
				pay: {}, //数据看板中支付统计
				option:{},
				option1: {},
				option2:{},
				unitList: [], //计量单位
				unit:'',
				widthVal: '', //进度条
				widthVal1: '', //进度条
				widthVal2: '', //进度条
				payVal: '', //进度条
				payVal1: '', //进度条
				payVal2: '', //进度条
				waybillMode:'',
				changeShow: false,
				carriersList: [],
				carrier: '',
				carriersVal:'', //承运商name
				etpId: '' , //承运商id
				loading: this.loading1,
				wayBillInfoDate:{},
				carrierName:''
			}
		},
		components: {
			echarts,stapro
		},
		props:{
			wayBillId:{
				type:String
			},
			loading1: {
				type: Boolean
			},
		},
		mounted() {
			this.getWayBillData({wayBillId: this.wayBillId}) 
			this.getWayBillInfo()
		},
		methods:{
			getWayBillInfo() {
				wayBillInfo({
					wayBillId: this.wayBillId
				}).then(res => {
					if (res.code == 0) {
						console.log(res.data.waybillInfo)
						this.carrierName = res.data.waybillInfo.carrierName
						this.carriersVal = res.data.waybillInfo.carrierName
						
					} else {
						this.$refs.uToast.show({
							message: res.message
						})
					}
				})
			},
			getWayBillData(data) {
				wayBillDataBulletinBoard(data).then(res => {
					if (res.code == 0) {
						this.transportationTarget = res.data.transportationTarget
						this.logstatrt(res.data.transportationTarget)
						this.goods = res.data.goods
						this.goodsData(res.data.goods)
						this.transportCapacity = res.data.transportCapacity
						this.getEcharts(res.data.transportCapacity)
						this.pay = res.data.pay
						this.payEcharts(res.data.pay)
						this.waybillMode = res.data.waybillMode
						this.loading = false
					} else {
						uni.$u.toast(res.msg);
					}
				})
			},
			//货物统计信息
			goodsData(data) {
				// console.log(data,a)
				let a = data.loadingOrderNum / this.transportationTarget.total > 1 ? 1 : data.loadingOrderNum / this
					.transportationTarget.total
				let b = data.sendNum / this.transportationTarget.total > 1 ? 1 : data.sendNum / this
					.transportationTarget.total
				let c = data.receiptNum / this.transportationTarget.total > 1 ? 1 : data.receiptNum / this
					.transportationTarget.total
				this.widthVal = 530 * a + 'rpx'
				this.widthVal1 = 530 * b + 'rpx'
				this.widthVal2 = 530 * c + 'rpx'
			},
			//支付统计
			payEcharts(echartsData) {
				this.payVal = 488 * echartsData.noPayNum / echartsData.needPayNum + 'rpx'
				this.payVal1 = 488 * echartsData.partNum / echartsData.needPayNum + 'rpx'
				this.payVal2 = 488 * echartsData.completePayNum / echartsData.needPayNum + 'rpx'
				let a = '/' + echartsData.needPayNum
				this.option2 = {
					title: {
						text: '总单数',
						textStyle: {
							color: '#333333',
							fontSize: '12',
						},
						left: '18',
						top: '15'
					},
					series: [{
						type: 'gauge',
						startAngle: 360,
						endAngle: 0,
						min: 0,
						max: Number(echartsData.needPayNum),
						splitNumber: 360,
			
						itemStyle: {
							color: '#00468C',
							shadowColor: 'rgba(0,138,255,0.45)',
							shadowBlur: 10,
							shadowOffsetX: 2,
							shadowOffsetY: 2
						},
						progress: {
							show: true,
							roundCap: false,
							width: 10
						},
						pointer: {
							show: false,
							length: '75%',
							width: 10,
							offsetCenter: [0, '5%']
						},
						axisLine: {
							roundCap: false,
							lineStyle: {
								width: 10
							}
						},
						axisTick: {
							show: false,
							splitNumber: 2,
							lineStyle: {
								width: 2,
								color: '#999'
							}
						},
						splitLine: {
							show: false,
							length: 12,
							lineStyle: {
								width: 3,
								color: '#999'
							}
						},
						axisLabel: {
							show: false,
							distance: 30,
							color: '#999',
							fontSize: 20
						},
						title: {
							show: true
						},
						detail: {
							borderColor: '#999',
							fontSize: 12,
							offsetCenter: [0, 0],
							valueAnimation: true,
							formatter: function(value) {
								return '{value|' + value + '}{unit|' + a + '}';;
							},
							rich: {
								value: {
									fontSize: 12,
									color: '#777'
								},
								unit: {
									fontSize: 12,
									color: '#888888',
									padding: [0, 0, -20, 10]
								}
							}
						},
						data: [{
							value: Number(echartsData.needPayNum),
						}]
					}]
				}
			},
			
			//柱状图
			getEcharts(echartsDate) {
				this.option1 = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					title: {
						text: '其他数据',
						textStyle: {
							color: '#333333',
							fontSize: '12',
			
						},
						left: '18',
						top: '15'
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: ['未接单', '未起运', '运输中', '已送达'],
						axisTick: {
							show: false,
							lineStyle: {
								color: '#F5F7FB'
							}
						},
						nameTextStyle: {
							color: '#333333',
							fontSize: '12'
						}
					}],
					yAxis: [{
						show: false,
						type: 'value'
					}],
					series: [{
						name: 'Direct',
						type: 'bar',
						barWidth: '40%',
						data: [echartsDate.noOrderReceivedNum, echartsDate.noDepartureNum, echartsDate
							.inTransitNum, echartsDate.arriveNum
						],
						label: {
							show: true,
							position: 'top'
						},
					}]
				};
			},
			//运输目标的echarts
			logstatrt(echartsData) {
				this.option = {
					series: [{
						type: 'gauge',
						startAngle: 180,
						endAngle: 0,
						min: 0,
						max: echartsData.total,
						splitNumber: 12,
						itemStyle: {
							color: '#00468C',
							shadowColor: 'rgba(0,138,255,0.45)',
							shadowBlur: 10,
							shadowOffsetX: 2,
							shadowOffsetY: 2
						},
						progress: {
							show: true,
							roundCap: false,
							width: 14
						},
						pointer: {
							show: false,
							length: '75%',
							width: 16,
							offsetCenter: [0, '5%']
						},
						axisLine: {
							roundCap: false,
							lineStyle: {
								width: 14
							}
						},
						axisTick: {
							show: false,
							splitNumber: 2,
							lineStyle: {
								width: 2,
								color: '#999'
							}
						},
						splitLine: {
							show: false,
							length: 12,
							lineStyle: {
								width: 3,
								color: '#999'
							}
						},
						axisLabel: {
							show: false,
							distance: 30,
							color: '#999',
							fontSize: 20
						},
						title: {
							show: true
						},
						detail: {
							borderColor: '#999',
							fontSize: 12,
							offsetCenter: [0, 0],
							valueAnimation: true,
							formatter: function(value) {
								return echartsData.shippingRate;
							},
							rich: {
								value: {
									fontSize: 12,
									fontWeight: 'bolder',
									color: '#777'
								},
								name: {
									fontSize: 12,
									color: '#888888',
									padding: [0, 0, -20, 10]
								}
							}
						},
						data: [{
							value: echartsData.total - echartsData.surplusTotal,
							name: echartsData.remark
						}]
					}]
				}
			},
			//打开修改承运商弹框
			changeCarrier() {
			
				this.changeShow = true
				this.getCarrier()
			},
			searchCarrier(){
				
				this.getCarrier(this.carrier)
			},
			//获取承运商
			getCarrier(val) {
				let data = {
					etpName: val || ''
				}
				this.carriersList = []
				carriers(data).then(res => {
					if (res.code == 0) {
						this.carriersList = []
						console.log(this.carrierName)
						for (let i = 0; i < res.data.length; i++) {
							let li 
							console.log(res.data[i], this.carrierName)
							if(res.data[i].etpName == this.carrierName){
								li = {
									...res.data[i],
									disabled: true
								}
								console.log(res.data[i],111111111)
								this.etpId = res.data[i].etpId
							}else{
								li = {
									...res.data[i],
									disabled: false
								}
							}
							this.carriersList.push(li)
						}
					}
				})
			},
			cancle() {
				this.changeShow = false
			},
			//货主端承运商列表
			
			// getCarrierList() {
			// 	let data = {
			// 		custom: {
			// 			title: '获取承运商……'
			// 		}
			// 	}
			// 	carrierList(data).then((res) => {
			// 		if (res.code == 0) {
			// 			this.carriersList = res.data
			// 		} else {
			// 			uni.$u.toast(res.msg);
			// 		}
			// 	}).catch(err => {
			// 		console.log(err)
			// 	})
			// },
			groupChange(n){
				
			},
			radioChange(n){
				let obj = this.carriersList.find(item => {
					return item.etpName === n
				})
				console.log(obj)
				this.carriersVal = n 
				this.etpId = obj.etpId
			},
			
			upCarrier(){
				console.log(this.etpId)
				if(!this.etpId){
					uni.$u.toast('请选择承运商');
					return false
				}
				let a={
					wayBillId: this.wayBillId,// --运单id
					carrierId: this.etpId,//--承运商id
					carrierName:this.carriersVal//--承运商名称
				}
				updateCarrier(a).then(res => {
					if(res.code == 0){
						this.changeShow = false
						uni.$u.toast(res.msg);
					}else{
						uni.$u.toast(res.msg);
					}
				})
			}
			
		}
	}
</script>

<style lang="less">
	*{
		box-sizing: border-box;
	}
	.billsInfo {
		
		.transTarget {
			height: 418rpx;
			background: #FFFFFF;
			padding-top: 14rpx;
			.h5 {
				height: 36rpx;
				font-size: 30rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 36rpx;
				border-left: 8rpx solid #003E81;
				padding-left: 22rpx;
				margin: 28rpx 0 20rpx;
				width: 714rpx;
	
				// z-index: 99999;
				.pattern {
					float: right;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					background: url('@/static/waybIll/zhipai.png') no-repeat;
					background-size: 32rpx 38rpx;
					background-position: 0 center;
					padding-left: 44rpx;
				}
	
				.pattern:first-child {
					background: url('@/static/waybIll/qiangd.png') no-repeat;
					background-size: 32rpx 38rpx;
					background-position: 0 center;
				}
			}
		}
	
		.goods {
			width: 100%;
			height: 380rpx;
			background: #FFFFFF;
			padding-top: 20rpx;
			margin-top: 14rpx;
			position: relative;
	
			.h5 {
				position: absolute;
				top: 14rpx;
				left: 0;
				height: 36rpx;
				font-size: 30rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 36rpx;
				border-left: 8rpx solid #003E81;
				padding-left: 22rpx;
				margin: 0 0 20rpx;
	
				text {
					font-size: 24rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 20rpx;
					margin-left: 8rpx;
				}
			}
	
			.echartsBot {
				position: absolute;
				bottom: 0;
				width: 100%;
				left: 0;
				padding: 16rpx 40rpx;
	
				.sum {
					width: 50%;
					float: left;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #888888;
					line-height: 54rpx;
					padding-left: 70rpx;
					background: url('@/static/waybIll/echarts1.png') no-repeat;
					background-size: 58rpx 18rpx;
					background-position: 0 center;
					height: 40rpx;
					line-height: 40rpx;
	
					text {
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
					}
				}
	
				.surplus {
					float: right;
					padding-left: 96rpx;
					background: url('@/static/waybIll/echarts.png') no-repeat;
					background-size: 58rpx 18rpx;
					background-position: 0 center;
				}
			}
	
			.goodsStatistics {
				padding: 86rpx 44rpx 28rpx 44rpx;
				font-size: 20rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #888888;
	
				.statistics {
					margin-bottom: 44rpx;
	
					.staPro {
						float: right;
						width: 530rpx;
						height: 18rpx;
						background: #F4F4F4;
						border-radius: 4rpx;
	
					}
				}
	
				.statisticsBot {
					display: flex;
					padding: 0 0 0 56rpx;
	
					.sum {
						width: 33%;
						padding: 0 64rpx 0 74rpx;
						background: url('@/static/waybIll/echarts2.png') no-repeat;
						background-size: 58rpx 18rpx;
						background-position: 0 center;
	
						text {
							font-size: 24rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #333333;
						}
					}
	
					.bg1 {
						background: url('@/static/waybIll/echarts3.png') no-repeat;
						background-size: 58rpx 18rpx;
						background-position: 0 center;
					}
	
					.bg2 {
						background: url('@/static/waybIll/echarts4.png') no-repeat;
						background-size: 58rpx 18rpx;
						background-position: 0 center;
					}
				}
			}
	
			.leftBox {
				margin-top: 30rpx;
				padding: 44rpx 44rpx 38rpx;
				float: left;
	
				view {
					font-size: 24rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					text-align: left;
	
					.num {
						font-size: 58rpx;
						font-family: DINPro-Bold, DINPro;
						font-weight: bold;
						color: #00468C;
						margin: 14rpx 0 29rpx;
					}
				}
			}
	
			.rightBox {
				float: right;
				width: 520rpx;
			}
	
			.payBox {
				.payEcharts {
					width: 240rpx;
					position: absolute;
				}
	
				.paynum {
					font-size: 20rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #888888;
					height: 30rpx;
					line-height: 30rpx;
					float: right;
					margin-top: 20rpx;
					padding-right: 28rpx;
					padding-top: 40rpx;
					text {
						line-height: 30rpx;
						font-size: 30rpx;
						font-family: DINPro-Bold, DINPro;
						font-weight: bold;
						color: #00468C;
					}
	
					.staPro {
						margin: 4rpx 0 16rpx;
						width: 488rpx;
						height: 18rpx;
						background: #F4F4F4;
						border-radius: 4rpx;
	
					}
				}
			}
		}
	}
	
	.btnBox {
		width: 100%;
		// height: 128rpx;
		background: #FFFFFF;
		position: fixed;
		padding: 14rpx 32rpx 24rpx;
		bottom: 0;
		left: 0;
		box-sizing: border-box;
	
		.tabLi {
			padding-top: 20rpx;
		}
	
		.btn {
			color: #FFFFFF;
			border-radius: 6px;
			height: 80rpx;
			background: linear-gradient(to right, #4d83b9, #003E81);
			text-align: center;
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 80rpx;
		}
		.changeHead {
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			text-align: center;
			padding: 28rpx 0 14rpx;
		}
		
		.searchBox {
			padding: 0 28rpx;
			// .tabUl{
		
			// }
		}
		
		.tabUl {
			height: 300rpx;
			overflow-y: auto;
		
			.tabLi {
				width: 692rpx;
				margin: 0 auto;
				border-bottom: 2rpx solid #F5F7FB;
				height: 98rpx;
				line-height: 98rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
		
				.u-checkbox-group--row {
					float: right;
					margin-top: 24rpx;
				}
			}
		
			.tabLi:last-child {
				border-bottom: none
			}
		}
		.changeBtn {
			display: flex;
			padding: 8rpx 28rpx 68rpx 28rpx;
			font-size: 28rpx;
		
			.cancle {
				width: 264rpx;
				height: 86rpx;
				line-height: 86rpx;
				text-align: center;
				border: 2rpx dashed #E8E8E8;
				border-radius: 4rpx;
			}
		
			.true {
				width: 398rpx;
				height: 86rpx;
				line-height: 86rpx;
				text-align: center;
				border-radius: 4rpx;
				background: #00468C;
				margin-left: 28rpx;
				color: #FFFFFF;
			}
		}
	}
	
</style>